<template>
	<view>

		<view>
			<view style="display: flex;flex-direction: column;align-items: center;margin:100rpx;">
				<image :src="dbStorage.avatarurl" style="width: 150rpx;height: 150rpx;"></image>
				<text class="text-lg padding-tb-sm">{{dbStorage.nickName}}</text>
			</view>

		</view>

		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange"></text> 用户ID：No.202200{{dbStorage.uid*1000}}
			</view>
			<view class="action">
				<button v-if="login?true:false" class="cu-btn bg-green shadow" open-type="getUserInfo" @click="bindWeixin">微信授权绑定</button>
			</view>
		</view>

		<!-- 菜单 -->
		<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">


			<view class="cu-item item-height" :class="menuArrow?'arrow':''">
				<navigator class="content" hover-class="none" url='../babylist/babylist'>
					<text class="cuIcon-group text-orange"></text>
					<text class="text-grey">我的宝宝</text>
				</navigator>
			</view>

			<view class="cu-item" :class="menuArrow?'arrow':''">
				<navigator class="content" hover-class="none" url="../pm/pm">
					<text class="cuIcon-list text-orange"></text>
					<text class="text-grey">项目设置</text>
				</navigator>
			</view>

			<view class="cu-item" :class="menuArrow?'arrow':''">
				<navigator class="content" hover-class="none">
					<text class="cuIcon-creative text-red  margin-right-xs"></text>
					<text class="text-grey">探索与发现</text>
				</navigator>
				<view class="action">
					<view class="cu-tag round bg-orange light">哭</view>
					<view class="cu-tag round bg-olive light">笑</view>
					<view class="cu-tag round bg-blue light">坐</view>
					<view class="cu-tag round bg-green light">爬</view>
				</view>
			</view>
			<view class="cu-item" :class="menuArrow?'arrow':''">
				<navigator class="content" hover-class="none" url="../aboutme/aboutme">
					<text class="cuIcon-warn text-green"></text>
					<text class="text-grey">关于本小程序</text>
				</navigator>
				<view class="action">
					<text class="text-grey text-sm">快乐陪伴～</text>
				</view>
			</view>

			<view class="cu-item item-height" :class="menuArrow?'arrow':''">
				<navigator class="content" hover-class="none">
					<text class="cuIcon-share text-orange"></text>
					<text class="text-grey">分享小程序</text>
				</navigator>
			</view>
		</view>

	</view>

</template>

<script>
	import url_config from '@/common/config.js'
	export default {
		data() {
			return {
				modalName: null,
				menuBorder: true,
				menuArrow: true,
				menuCard: true,
				skin: false,
				switchA: false,
				login: true,
				dbStorage: {
					uid: 0,
					nickName:'',
					gender:0,
					avatarurl:'',
					code:'',
					session3rd:null
				}
			}
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			MenuBorder(e) {
				this.menuBorder = e.detail.value
			},
			MenuArrow(e) {
				this.menuArrow = e.detail.value
			},
			MenuCard(e) {
				this.menuCard = e.detail.value
			},
			getWxCode(){
				//单独获取一次code
				uni.login({
					provider:'weixin',
					success: (res) => {
						this.dbStorage.code = res.code
					},
					fail:(er)=> {
						uni.showToast({
							title:'登录失败',
							duration:1000
						})
					}
				})
			},
			bindWeixin() {
				var _this = this
				//微信登录
				uni.getUserProfile({
					desc: '用户注册与账号绑定',
					success: (res) => {
								//通过获取的code到服务器获取openid和sessionKey
								uni.request({
									url: url_config.api + 'getuserinfo',
									method: 'POST',
									data: {
										uid: this.dbStorage.uid,
										code: this.dbStorage.code,
										encryptedData: res.encryptedData,
										iv: encodeURIComponent(res.iv), //重新编码
										signature: res.signature,
										rawData: res.rawData
									},
									success: (res2) => {
										//将获取的openid和SessionKey存入数据库并返回第三方session作为登录态验证
										//console.log(res2)
										//登录成功后，清理以前的缓存
										//uni.clearStorageSync()
										uni.setStorageSync('session3rd', res2.data.data
											.session3rd)
										this.dbStorage.session3rd = res2.data.data
											.session3rd
										if (res2.data.data.hasOwnProperty('uid')) {
											//判断返回来的对象中是否包含uid这个key
											this.dbStorage.uid = res2.data.data.uid
											uni.setStorageSync('user_id', res2.data.data.uid)
										}
										// this.dbStorage.avatarurl = res2.data.data.avatarUrl
										// this.dbStorage.nickName = res2.data.data.nickName
										this.login = false
									},
									complete() {
										//console.log('再次拉取信息并缓存babyid')
										_this.getuserinfo()
									}
								})

							}
						})
			},
			getuserinfo(){
				//console.log(this.dbStorage.uid)
				uni.request({
					url: url_config.api + 'getUserInfo2/' + this.dbStorage.uid,
					success: (res) => {
						//console.log('userinfo:',res.data.data)
						this.dbStorage.nickName = res.data.data.nickName
						this.dbStorage.avatarurl = res.data.data.avatarurl
						uni.setStorageSync('bb_id',res.data.data.bid)
						
					},
					fail(e) {
						console.log(e)
					}
				})
			}

		},
		onLoad() {
			this.getWxCode()
			this.dbStorage.uid = uni.getStorageSync('user_id')
			const session3rd = uni.getStorageSync('session3rd')
			if(session3rd){
				this.dbStorage.session3rd = session3rd
				//已经绑定了则不展示绑定按钮
				this.login = false
			}
			this.getuserinfo()
			
		}
	}
</script>

<style lang="less">
	.item-height {
		height: 120rpx;
	}
</style>
